<template>
  <div>
    <mt-header title="活动统计" fixed style="background-color: #ff4d4f;color:#fff;">
      <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <mt-navbar v-model="selected">
        <mt-tab-item :id="1">高一</mt-tab-item>
        <mt-tab-item :id="2">高二</mt-tab-item>
        <mt-tab-item :id="3">高三</mt-tab-item>
      </mt-navbar>

      <!-- tab-container -->
      <mt-tab-container v-model="selected">
        <mt-tab-container-item :id="1">
          <div class="list_left" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
            <mt-loadmore
              class="loadmore"
              :top-method="loadTop"
              :bottom-method="loadBottom"
              :bottom-all-loaded="allLoaded"
              ref="loadmore"
              :autoFill="isAutoFill"
            >
              <div style="height:100%">
                <ul style="overflow:scroll;">
                  <li @click="btn_view(item)" v-for="(item,index) in list_g1" :key="index">
                    <div>{{item.Name}}</div>
                    <div>
                      <span>{{item.EndTime}}</span>
                      <span class="Signed">{{item.Signed}}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </mt-loadmore>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item :id="2">
          <div class="list_left" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
            <mt-loadmore
              class="loadmore"
              :top-method="loadTop"
              :bottom-method="loadBottom2"
              :bottom-all-loaded="allLoaded"
              ref="loadmore2"
              :autoFill="isAutoFill"
            >
              <ul style="overflow:scroll;">
                <li @click="btn_view(item)" v-for="(item,index) in list_g2" :key="index">
                  <div>{{item.Name}}</div>
                  <div>
                    <span>{{item.EndTime}}</span>
                    <span class="Signed">{{item.Signed}}</span>
                  </div>
                </li>
              </ul>
            </mt-loadmore>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item :id="3">
          <div class="list_left" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
            <mt-loadmore
              class="loadmore"
              :top-method="loadTop"
              :bottom-method="loadBottom3"
              :bottom-all-loaded="allLoaded"
              ref="loadmore1"
              :autoFill="isAutoFill"
            >
              <ul style="overflow:scroll;">
                <li @click="btn_view(item)" v-for="(item,index) in list_g3" :key="index">
                  <div>{{item.Name}}</div>
                  <div>
                    <span>{{item.EndTime}}</span>
                    <span class="Signed">{{item.Signed}}</span>
                  </div>
                </li>
              </ul>
            </mt-loadmore>
            <!-- <mt-button style="background:red" class="btn" @click="dz_btn" type="primary">点赞</mt-button> -->
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
export default {
  props: {},
  data() {
    return {
      // token:'',
      token: "009800A30080002E00F900F400A6000C0090006900650003007600DA00320027",
      selected: 1,
      list_g1: [],
      list_g2: [],
      list_g3: [],
      allLoaded: false,
      isAutoFill: false,
      wrapperHeight: 0,
      PageIndex: 1,
      PageTotal: 0,
      PageIndex1: 1,
      PageTotal1: 0,
      PageIndex2: 1,
      PageTotal2: 0
    };
  },
  computed: {},
  created() {
    this.token = localStorage.getItem("token");
    if (this.$route.query.selected) {
      this.selected = this.$route.query.selected;
      console.log(this.selected);
    }
  },

  mounted() {
    this.get_list_g1();
    this.get_list_g2();
    this.get_list_g3();
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top -
      110;
  },
  watch: {},
  methods: {
    loadTop() {
      this.get_list_g1();
      this.get_list_g2();
      this.get_list_g3();
    },
    loadBottom() {
      this.loadMore();
    },
    loadBottom2() {
      this.loadMore2();
    },
    loadBottom3() {
      this.loadMore3();
    },
    loadMore() {
      if (this.PageIndex > this.PageTotal) {
        Toast("已经到底了");
        this.$refs.loadmore.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Systems/WxGradeSubPage",
          data: {
            Grade: 1,
            PageIndex: this.PageIndex,
            PageSize: 10
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list_g1 = this.list_g1.concat(res.Data.RecordList);
              this.PageIndex++;
              this.$refs.loadmore.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    loadMore2() {
      if (this.PageIndex1 > this.PageTotal1) {
        Toast("已经到底了");
        this.$refs.loadmore2.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Systems/WxGradeSubPage",
          data: {
            Grade: 2,
            PageIndex: this.PageIndex,
            PageSize: 10
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list_g2 = this.list_g2.concat(res.Data.RecordList);

              this.PageIndex1++;
              this.$refs.loadmore2.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    loadMore3() {
      if (this.PageIndex2 > this.PageTotal2) {
        Toast("已经到底了");
        this.$refs.loadmore1.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Systems/WxGradeSubPage",
          data: {
            Grade: 2,
            PageIndex: this.PageIndex2,
            PageSize: 10
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list_g3 = this.list_g3.concat(res.Data.RecordList);

              this.PageIndex2++;
              this.$refs.loadmore1.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    get_list_g1() {
      https({
        method: "post",
        url: "/api/v1/Systems/WxGradeSubPage",
        data: {
          Grade: 1,
          PageIndex: 1,
          PageSize: 10
        }
      })
        .then(res => {
          if (res.Code == 200) {
            this.allLoaded = false;
            this.PageIndex = res.Data.PageIndex;
            this.PageTotal = res.Data.PageTotal;
            this.PageIndex = 2;
            this.list_g1 = res.Data.RecordList;
            console.log(this.list_g1);
            this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    get_list_g2() {
      https({
        method: "post",
        url: "/api/v1/Systems/WxGradeSubPage",
        data: {
          Grade: 2,
          PageIndex: 1,
          PageSize: 10
        }
      })
        .then(res => {
          if (res.Code == 200) {
            this.allLoaded = false;
            this.PageIndex1 = res.Data.PageIndex;
            this.PageTotal1 = res.Data.PageTotal;
            this.PageIndex1 = 2;
            this.list_g2 = res.Data.RecordList;

            this.$refs.loadmore1.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    get_list_g3() {
      https({
        method: "post",
        url: "/api/v1/Systems/WxGradeSubPage",
        data: {
          Grade: 3,
          PageIndex: 1,
          PageSize: 10
        }
      })
        .then(res => {
          if (res.Code == 200) {
            this.allLoaded = false;
            this.PageIndex2 = res.Data.PageIndex;
            this.PageTotal2 = res.Data.PageTotal;
            this.PageIndex2 = 2;
            this.list_g3 = res.Data.RecordList;

            this.$refs.loadmore1.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // dz_btn() {
    //   https({
    //     method: "post",
    //     url: "/api/Praise/Praise",
    //     data: {
    //       TokenCode: this.token,
    //       VersionCode: "1.0",
    //       TimeStamp: 0,
    //       FormData: {
    //         MemberID: 10,
    //         ArticleID: 10
    //       },
    //       RecordKey: "",
    //       SignCode: ""
    //     }
    //   })
    //     .then(res => {})
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    getWzDetail(id) {
      https({
        method: "post",
        url: "/api/Article/GetSingle",
        data: {
          TokenCode: this.token,
          VersionCode: "1.0",
          TimeStamp: 0,
          FormData: {},
          RecordKey: id,
          SignCode: ""
        }
      })
        .then(res => {
          if (res.ResultCode == 111111) {
            // this.popupVisible = true;
            this.$router.push({
              path: "/replay_detal",
              query: { list: res.ResultData, selected: this.selected }
            });
          } else {
            Toast(res.ResultDescribe);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btn_view(row) {
      console.log(row);
      this.$router.push({
        path: "/Statistics_detail",
        query: {
          id: row.ActivityID,
          selected: this.selected,
          Grade: this.selected,
          name: row.Name
        }
      });
      //   if (row.ArticlePrice == 0) {
      //     this.getWzDetail(row.ArticleID);
      //   } else {
      //     if (row.PaymentID == "") {
      //       MessageBox.confirm("您确定花费" + row.ArticlePrice + "元购买").then(
      //         action => {
      //           https({
      //             method: "post",
      //             url: "/api/Money/BuyArticle",
      //             data: {
      //               TokenCode: this.token,
      //               VersionCode: "1.0",
      //               TimeStamp: 0,
      //               FormData: {},
      //               RecordKey: row.ArticleID,
      //               SignCode: ""
      //             }
      //           })
      //             .then(res => {
      //               if (res.ResultCode == 111111) {
      //                 Toast("购买成功");
      //                 this.getWzDetail(row.ArticleID);
      //               } else {
      //                 Toast({
      //                   message: res.ResultDescribe,
      //                   duration: 3000
      //                 });
      //               }
      //             })
      //             .catch(err => {
      //               Toast({
      //                 message: "取消购买",
      //                 duration: 3000
      //               });
      //             });
      //         }
      //       );
      //     } else {
      //       this.getWzDetail(row.ArticleID);
      //     }
      //   }
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  padding-top: 2.5rem;
  box-sizing: border-box;
  background: #fff;
}
.list_left {
  width: 100%;
  margin-top: 0.3rem;
  overflow: scroll;
  height: 100%;
  .loadmore {
    height: 100%;
  }
  ul {
    margin: 0;
    padding: 0;
    height: 100%;
    li {
      list-style: none;
      width: 95%;
      margin: 0 auto;

      background: #fff;
      border-bottom: 1px solid #eee;
      font-size: 0.9rem;
      padding-top: 0.8rem;
      box-sizing: border-box;
      .Signed {
        float: right;
      }
    }
  }
}
</style>
